<!-- 首页及吸顶 公共tab栏 -->
<template>
    <ul class="commonnavs">
            <li class="home"><RouterLink to="/">首页</RouterLink></li>
            <li v-for="(item,key) in catelist" :key="item.id">
                <a @click="setColor(key,item.id)"  :class="{cateactive:key==$store.state.category.nowcateindex}">{{item.name}}</a>
                <div class="layer">
                    <ul>
                        <li v-for="it in item.children" :key="it.id">
                            <router-link :to="'/cate/sub?id='+it.id">
                                <!-- <img :src="it.picture" alt=""> -->
                                <img src="" alt="" v-lazy="it.picture">
                                <p>{{it.name}}</p>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </li>
    </ul>
</template>
<script>
export default {
    computed:{
        catelist(){
            return this.$store.state.category.cate
        }
    },
    methods:{
      setColor(k,id){
        // 将k保存到vuex中
        this.$store.commit('category/setCateIndex',k)
        // 跳转
        this.$router.replace('/cate?id='+id)
      },
      // 跳转到子分类页面
      goSubCate(parentkey,id){
        this.$store.commit('category/setCateIndex',parentkey)
        this.$router.push('/cate/sub?id='+id)
      }
    }
}
</script>
<style lang="scss" scope>
@import "@/assets/css/variables.scss";
  .commonnavs {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    position: relative;
    >li {
      margin-right: 40px;
      width: 38px;
      text-align: center;

      >a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
      }
      &:hover {
        >a {
          color: $xtxColor;
          border-bottom: 1px solid $xtxColor;
        }
        > .layer {
        height: 132px;
        opacity: 1;
      }
      }
    }
  }
  .layer {
  z-index:999;
  width: 1240px;
  background-color:#fff;
  position: absolute;
  left: -200px;
  top: 56px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 0 5px #ccc;
  transition: all .2s .1s;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 70px;
    align-items: center;
    height: 132px;
    li {
      width: 110px;
      text-align: center;
      img {
        width: 60px;
        height: 60px;
      }
      p {
        padding-top: 0px;
      }
      &:hover {
        p {
          color: $xtxColor;
        }
      }
    }
  }
}
.cateactive{
  color: $xtxColor;
  border-bottom: 1px solid $xtxColor;
}
</style>

